<template>
  <div>
    <el-dialog v-loading="loading" :title="title" :visible.sync="open" width="800px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-tabs v-model="activeTab">
          <!-- 基础信息 Tab -->
          <el-tab-pane label="基础信息" name="basic">
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="form.goods_name" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="商品图片">
                  <el-upload
                    class="upload-demo"
                    :action="imageAction"
                    :headers="{ 'Authorization': 'Bearer ' + authToken }"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :before-upload="beforeUpload"
                    :limit="3"
                    multiple
                    :file-list="fileList"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 规格设置 Tab -->
          <el-tab-pane label="规格设置" name="spec">
            <el-form-item label="商品规格">
              <el-radio v-model="radio" label="1">单规格</el-radio>
              <el-radio v-model="radio" label="2">多规格</el-radio>
            </el-form-item>

            <div v-if="radio == 1">
              <el-form-item label="价格">
                <el-input v-model="form.price" placeholder="请输入商品价格" />
              </el-form-item>
              <el-form-item label="库存">
                <el-input v-model="form.stock" placeholder="请输入商品库存" />
              </el-form-item>
            </div>
            <div v-else>
              <el-card class="box-card" style="margin-bottom: 20px;">
                <div slot="header" class="clearfix">
                  <span>规格设置</span>
                  <el-button style="float: right; margin-left: 10px;" type="primary" size="small" @click="addList">添加规格项</el-button>
                </div>
                <el-form :inline="false" label-width="80px">
                  <div v-for="item in list" :key="item.id" class="spec-item">
                    <el-row :gutter="20">
                      <el-col :span="6">
                        <el-form-item label="规格名">
                          <div class="spec-name-wrapper">
                            <el-input v-model="item.int_name" placeholder="如：颜色" />
                            <span v-if="item.is_new" class="status-tag status-new">新</span>
                            <span v-if="item.is_existing" class="status-tag status-exist">存</span>
                          </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="规格值">
                          <el-tag
                            v-for="(val, index) in getSpecValues(item)"
                            :key="index"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(item, index)"
                            style="margin-right: 10px;"
                            :class="{
                              'spec-tag': true,
                              'spec-tag-new': item.valueStatus && item.valueStatus[val] === 'new',
                              'spec-tag-exist': item.valueStatus && item.valueStatus[val] === 'existing'
                            }"
                          >
                            {{ val }}
                            <span v-if="item.valueStatus && item.valueStatus[val] === 'new'" class="status-dot new-dot"></span>
                            <span v-if="item.valueStatus && item.valueStatus[val] === 'existing'" class="status-dot exist-dot"></span>
                          </el-tag>
                          <el-input
                            v-if="item.inputVisible"
                            ref="saveTagInput"
                            v-model="item.inputValue"
                            class="input-new-tag"
                            size="small"
                            @keyup.enter.native="handleInputConfirm(item)"
                            @blur="handleInputConfirm(item)"
                          />
                          <el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ 添加规格值</el-button>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-button type="text" icon="el-icon-delete" @click="del(item.id)">删除</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form>
              </el-card>

              <el-card class="box-card" v-if="list.length > 0">
                <div slot="header" class="clearfix">
                  <span>规格列表</span>
                  <el-button style="float: right; margin-left: 10px;" type="primary" size="small" @click="addTable">生成规格</el-button>
                </div>
                <el-table
                  v-if="list2.length > 0"
                  :data="list2"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    prop="sku_name"
                    label="规格名称"
                    min-width="180"
                  >
                    <template slot-scope="scope">
                      <div class="sku-name-wrapper">
                        {{ scope.row.sku_name }}
                        <span v-if="scope.row.is_new" class="status-tag status-new">新</span>
                        <span v-if="scope.row.goods_sku" class="status-tag status-exist">存</span>
                        <span v-if="scope.row.to_be_deleted" class="status-tag status-delete">删</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="sku_price"
                    label="价格"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <el-input-number 
                        v-model="scope.row.sku_price" 
                        :min="0" 
                        :precision="2" 
                        :step="0.1"
                        controls-position="right"
                        placeholder="请输入价格"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="sku_stock"
                    label="库存"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <el-input-number 
                        v-model="scope.row.sku_stock" 
                        :min="0" 
                        :precision="0" 
                        :step="1"
                        controls-position="right"
                        placeholder="请输入库存"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <div v-else class="empty-text">
                  请点击"生成规格"按钮生成规格列表
                </div>
              </el-card>
            </div>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="category_ids"
                placeholder="请选择"
                :options="options1"
                :props="props"
                collapse-tags
                clearable
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="贸易类型">
              <el-select v-model="form.trade_type_name" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-tab-pane>

          <!-- 其他信息 Tab -->
          <el-tab-pane label="其他信息" name="other">
            <el-form-item label="品牌" prop="brand_name">
              <el-input v-model="form.brand_name" placeholder="请输入商品品牌" />
            </el-form-item>
            <el-form-item label="单位" prop="unit_name">
              <el-input v-model="form.unit_name" placeholder="请输入商品单位" />
            </el-form-item>
            <el-form-item label="产地" prop="origin_name">
              <el-input v-model="form.origin_name" placeholder="请输入商品产地" />
            </el-form-item>
            <el-form-item label="商品详情">
              <vue-ueditor-wrap
                v-model="content"
                editor-id="editor"
                :config="editorConfig"
                :editor-dependencies="['ueditor.config.js', 'ueditor.all.js']"
                style="height:500px;"
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-row style="margin-top: 20px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { postTenantGoods, editTenantGoods, getCategory } from '@/api/externalGoods'
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  name: 'AddEdit',
  components: {
    VueUeditorWrap
  },
  props: ['open', 'form', 'title'],
  // props: {
  //   open: {
  //     type: Boolean
  //   },
  //   form: {
  //   },
  //   title: {
  //     type: String
  //   }
  // },
  data() {
    return {
      activeTab: 'basic',
      loading: true,
      list: [{ 
        id: 1, 
        int_name: '', 
        values: [], 
        inputVisible: false,
        inputValue: '' 
      }],
      list2: [],
      originalSkuList: [],
      total: 0,
      goods_img: [],
      queryParams: {
        page: 1,
        limit: 10
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_img: [
          { required: true, message: '请上传商品图片', trigger: 'blur' }
        ],
        brand_name: [
          { required: true, message: '请输入商品品牌', trigger: 'blur' }
        ],
        unit_name: [
          { required: true, message: '请输入商品单位', trigger: 'blur' }
        ],
        origin_name: [
          { required: true, message: '请输入商品产地', trigger: 'blur' }
        ]
      },
      fileList: [],
      authToken: this.$store.state.user.token,
      imageAction: '/imgapi/upload_file.php?tid=10918',
      radio: '1',
      content: '<p>请输入商品详情</p>',
      editorConfig: {
        // 编辑器后端服务接口，参考后端规范 https://open-doc.modstart.com/ueditor-plus/backend.html
        serverUrl: 'https://img.qekj.net/php/controller.php',
        // 配置 UEditorPlus 的静态资源根路径，可以是 CDN 的静态资源地址
        UEDITOR_HOME_URL: '/UEditor/',
        // UEDITOR_CORS_URL: '/static/UEditorPlus'
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 3000
      },
      options1: [],
      options2: [{
        value: '1',
        label: '保税直供'
      }, {
        value: '2',
        label: '完税进口'
      }, {
        value: '3',
        label: '国内贸易'
      }, {
        value: '4',
        label: '香港直邮'
      }, {
        value: '5',
        label: '海外直邮'
      }],
      props: { checkStrictly: true, label: 'name', value: 'id' },
      category_ids: []
    }
  },
  watch: {
    'open': function(newValue, oldValue) {
      if (newValue) {
        if (this.title === '编辑') {
          this.fileList = []
          this.goods_img = []
          this.list = []
          this.list2 = []
          this.content = this.form.description
          this.category_ids = this.form.cate_id_arr
          this.form.goods_slideshow_img.forEach(item => {
            this.fileList.push({ url: item })
          })
          this.fileList.forEach(item => {
            this.goods_img.push(item.url)
          })
          if (this.form.spec == 1) {
            this.radio = '1'
          } else {
            this.radio = '2'
            // 处理规格数据
            const specMap = new Map()
            this.form.attr.forEach((item) => {
              if (!specMap.has(item.name)) {
                specMap.set(item.name, {
                  id: specMap.size + 1,
                  int_name: item.name,
                  values: [item.attribute_name],
                  inputVisible: false,
                  inputValue: '',
                  is_existing: true,
                  valueStatus: {
                    [item.attribute_name]: 'existing'
                  }
                })
              } else {
                const existingSpec = specMap.get(item.name)
                existingSpec.values.push(item.attribute_name)
                existingSpec.valueStatus = {
                  ...existingSpec.valueStatus,
                  [item.attribute_name]: 'existing'
                }
              }
            })
            this.list = Array.from(specMap.values())
            
            // 处理规格组合数据
            this.list2 = this.form.rule.map((item, index) => ({ 
              goods_sku: item.goods_sku, 
              id: index + 1, 
              sku_name: item.sku_name, 
              sku_price: item.sku_price, 
              sku_stock: item.sku_stock 
            }))
            // 保存原始规格列表
            this.originalSkuList = JSON.parse(JSON.stringify(this.list2))
          }
        } else {
          this.fileList = []
          this.goods_img = []
          this.list = [{ 
            id: 1, 
            int_name: '', 
            values: [], 
            inputVisible: false,
            inputValue: '' 
          }]
          this.list2 = []
          this.originalSkuList = []
          this.content = '<p>请输入商品详情</p>'
          this.radio = '1'
        }
      }
    }
  },
  mounted() {
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    deepTraverse(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
          this.deepTraverse(arr[i])
        } else if (typeof arr[i] === 'object') {
          this.deepTraverse(Object.values(arr[i]))
          this.convertIdToNumber(arr[i])
        }
      }
    },
    convertIdToNumber(obj) {
      for (var key in obj) {
        if (typeof obj[key] === 'object') {
          this.convertIdToNumber(obj[key])
        } else if (key === 'cate_id' && typeof obj[key] === 'string') {
          obj[key] = parseInt(obj[key])
        }
      }
    },
    getCategoryList() {
      getCategory().then(response => {
        this.options1 = response.data
        this.deepTraverse(this.options1)
        // console.log(this.options1)
      })
    },
    log() {
      console.log(this.fileList)
    },
    delTable(val) {
      this.list2.forEach((item, index) => {
        if (item.id === val) {
          this.list2.splice(index, 1)
        }
      })
    },
    addTable() {
      if (this.list.length === 0) {
        this.$message({
          message: '请至少添加一个规格项',
          type: 'warning'
        })
        return
      }

      // 检查每个规格项是否都有值
      const invalidSpec = this.list.find(item => !item.int_name || !item.values || item.values.length === 0)
      if (invalidSpec) {
        this.$message({
          message: '请确保每个规格项都有规格名称和至少一个规格值',
          type: 'warning'
        })
        return
      }

      // 准备规格组合的数据
      const specArrays = this.list.map(item => {
        return item.values.map(value => `${item.int_name}:${value}`)
      })

      // 生成笛卡尔积
      const result = this.cartesianProduct(specArrays)
      
      // 生成新的规格表格数据
      const newList2 = result.map((combination, index) => {
        const skuName = combination.join(';')
        // 查找原始列表中是否存在相同规格名的数据
        const existingSku = this.originalSkuList.find(item => item.sku_name === skuName)
        
        if (existingSku) {
          // 如果在原始列表中存在，保留原有数据
          return {
            ...existingSku,
            is_new: false
          }
        } else {
          // 如果是新规格，创建新数据
          return {
            id: this.originalSkuList.length + index + 1,
            sku_name: skuName,
            sku_price: '',
            sku_stock: '',
            is_new: true,
            goods_sku: null
          }
        }
      })

      // 找出被删除的规格（只考虑原始列表中的规格）
      const removedSkus = this.originalSkuList.filter(oldSku => 
        !newList2.some(newSku => newSku.sku_name === oldSku.sku_name)
      )

      // 更新规格列表
      this.list2 = newList2

      // 显示提示信息
      if (this.title === '编辑') {
        const newSkus = this.list2.filter(item => item.is_new)
        const removedSkusCount = removedSkus.length
        
        let message = []
        if (newSkus.length > 0) {
          message.push(`新增了 ${newSkus.length} 个规格`)
        }
        if (removedSkusCount > 0) {
          message.push(`删除了 ${removedSkusCount} 个已有SKU规格`)
        }
        if (message.length > 0) {
          this.$message({
            message: message.join('，'),
            type: 'warning',
            duration: 5000
          })
        }
      }
    },
    cartesianProduct(arrays) {
      return arrays.reduce(function(a, b) {
        var result = []
        a.forEach(function(x) {
          b.forEach(function(y) {
            result.push(x.concat([y]))
          })
        })
        return result
      }, [[]])
    },
    add(val) {
      this.list.forEach(item => {
        if (item.id === val) {
          if (!item.int_2 && item.int_2 !== '') {
            this.$set(item, 'int_2', '')
          } else if (!item.int_3 && item.int_3 !== '') {
            this.$set(item, 'int_3', '')
          } else if (!item.int_4 && item.int_4 !== '') {
            this.$set(item, 'int_4', '')
          } else if (!item.int_5 && item.int_5 !== '') {
            this.$set(item, 'int_5', '')
          } else if (!item.int_6 && item.int_6 !== '') {
            this.$set(item, 'int_6', '')
          } else {
            this.$message({
              message: '最多添加6个属性值',
              type: 'warning'
            })
          }
        }
      })
    },
    del(val) {
      // 删除规格组时，记录被删除的规格名
      const deletedSpec = this.list.find(item => item.id === val)
      if (deletedSpec) {
        // 更新现有规格列表中的状态
        this.list2 = this.list2.map(sku => {
          // 如果现有SKU包含被删除的规格名，标记为删除
          if (sku.sku_name.includes(`${deletedSpec.int_name}:`)) {
            return {
              ...sku,
              to_be_deleted: true
            }
          }
          return sku
        })
      }
      this.list = this.list.filter(item => item.id !== val)
    },
    addList() {
      const id = Math.max(...this.list.map(item => item.id), 0) + 1
      this.list.push({ 
        id, 
        int_name: '', 
        values: [],
        inputVisible: false,
        inputValue: '',
        is_new: true,
        valueStatus: {}
      })
    },
    // 获取规格值数组
    getSpecValues(item) {
      return item.values || []
    },
    // 显示输入框
    showInput(item) {
      this.$set(item, 'inputVisible', true)
      this.$set(item, 'inputValue', '')
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 处理标签输入确认
    handleInputConfirm(item) {
      const inputValue = item.inputValue.trim()
      if (inputValue) {
        if (!item.values) {
          this.$set(item, 'values', [])
        }
        if (!item.valueStatus) {
          this.$set(item, 'valueStatus', {})
        }
        // 检查重复值
        if (item.values.indexOf(inputValue) === -1) {
          item.values.push(inputValue)
          // 标记新增的规格值
          this.$set(item.valueStatus, inputValue, 'new')
        } else {
          this.$message({
            message: '该规格值已存在',
            type: 'warning'
          })
        }
      }
      this.$set(item, 'inputVisible', false)
      this.$set(item, 'inputValue', '')
    },
    // 删除标签
    handleClose(item, index) {
      const deletedValue = item.values[index]
      // 更新现有规格列表中的状态
      this.list2 = this.list2.map(sku => {
        // 如果现有SKU包含被删除的规格值，标记为删除
        if (sku.sku_name.includes(`${item.int_name}:${deletedValue}`)) {
          return {
            ...sku,
            to_be_deleted: true
          }
        }
        return sku
      })
      item.values.splice(index, 1)
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的处理逻辑
      // console.log('上传成功', response)
      // console.log('file', file)
      // console.log('fileList', fileList)
      // console.log(this.fileList)
      this.goods_img.push(response.http_url)
      const list = {
        name: file.name,
        url: response.http_url
      }
      this.fileList.push(list)
    },
    handleError(error, file, fileList) {
      // 上传失败的处理逻辑
      console.log('上传失败', error)
      this.$message({
        message: '上传失败',
        type: 'error'
      })
    },
    beforeUpload(file) {
      // 文件上传之前的处理逻辑
      // console.log('文件上传之前', file)
    },
    handleRemove(file, fileList) {
      // 删除文件的处理逻辑
      var index = this.goods_img.indexOf(file.url)
      this.goods_img.splice(index, 1)
      this.fileList = fileList
    },
    close() {
      this.$emit('update:open', false)
    },
    submitForm(formName) {
      // 添加商品图片验证
      if (this.goods_img.length === 0) {
        this.$message({
          message: '请上传商品图片',
          type: 'error'
        })
        this.activeTab = 'basic'
        return false
      }

      // 添加多规格验证
      if (this.radio === '2') {
        if (this.list2.length === 0) {
          this.$message({
            message: '请生成规格列表',
            type: 'error'
          })
          this.activeTab = 'spec'
          return false
        }

        // 验证规格列表中的价格和库存是否填写
        const invalidSpec = this.list2.find(item => 
          item.sku_price === undefined || item.sku_price === '' || 
          item.sku_stock === undefined || item.sku_stock === ''
        )
        if (invalidSpec) {
          this.$message({
            message: '请填写所有规格的价格和库存',
            type: 'error'
          })
          this.activeTab = 'spec'
          return false
        }

        // 验证规格设置和规格列表是否匹配
        // 1. 生成理论上应该存在的规格组合数量
        const specArrays = this.list.map(item => item.values)
        const theoreticalCombinations = specArrays.reduce((acc, curr) => acc * curr.length, 1)

        // 2. 检查实际规格列表数量是否匹配
        if (this.list2.length !== theoreticalCombinations) {
          this.$message({
            message: '规格列表与规格设置不匹配，请点击"生成规格"按钮重新生成规格列表',
            type: 'error'
          })
          this.activeTab = 'spec'
          return false
        }

        // 3. 检查每个规格组合是否都有对应的规格值
        const allSpecNames = this.list.map(item => item.int_name)
        const invalidSkuName = this.list2.find(item => {
          const skuParts = item.sku_name.split(';')
          // 检查规格数量是否匹配
          if (skuParts.length !== allSpecNames.length) return true
          // 检查每个规格是否都存在于规格设置中
          return skuParts.some(part => {
            const [specName, specValue] = part.split(':')
            const specItem = this.list.find(s => s.int_name === specName)
            return !specItem || !specItem.values.includes(specValue)
          })
        })

        if (invalidSkuName) {
          this.$message({
            message: '规格列表中存在无效的规格组合，请点击"生成规格"按钮重新生成规格列表',
            type: 'error'
          })
          this.activeTab = 'spec'
          return false
        }
      }

      this.$refs[formName].validate((valid, errorFields) => {
        if (valid) {
          const vilnda = {}
          vilnda.goods_name = this.form.goods_name
          vilnda.goods_img = this.goods_img

          if (this.radio === '1') {
            vilnda.spec = 1
            vilnda.stock = this.form.stock
            vilnda.price = this.form.price
          } else {
            vilnda.spec = 2
            // 处理规格属性
            const attr = []
            this.list.forEach(item => {
              item.values.forEach(value => {
                attr.push({
                  'name': item.int_name,
                  'attribute_name': value
                })
              })
            })
            vilnda.goods_attr = attr
            // 处理规格规则，只保留必要的字段
            vilnda.goods_rule = this.list2.map(item => ({
              sku_name: item.sku_name,
              sku_price: item.sku_price,
              sku_stock: item.sku_stock,
              goods_sku: item.goods_sku || null // 保留goods_sku用于后台判断
            }))
          }

          vilnda.unit_name = this.form.unit_name
          vilnda.brand_name = this.form.brand_name
          vilnda.origin_name = this.form.origin_name
          vilnda.description = this.content

          // 处理分类ID
          this.category_ids.forEach(item => {
            vilnda.category_id = item
          })
          if (!vilnda.category_id) {
            this.$message({
              message: '请选择商品分类',
              type: 'warning'
            })
            this.activeTab = 'spec'
            return false
          }

          // 处理贸易类型
          if (!this.form.trade_type_name) {
            this.$message({
              message: '请选择商品类型',
              type: 'warning'
            })
            this.activeTab = 'spec'
            return false
          }

          const tradeTypeMap = {
            '1': { id: 1, name: '保税直供' },
            '2': { id: 2, name: '完税进口' },
            '3': { id: 3, name: '国内贸易' },
            '4': { id: 4, name: '香港直邮' },
            '5': { id: 5, name: '海外直邮' }
          }

          const tradeType = tradeTypeMap[this.form.trade_type_name]
          if (tradeType) {
            vilnda.trade_type_id = tradeType.id
            vilnda.trade_type_name = tradeType.name
          }

          // 提交数据
          if (this.title === '添加') {
            postTenantGoods(vilnda).then(res => {
              if (res.code === 10000) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.$emit('update:open', false)
                this.$emit('refresh')
              }
            })
          } else {
            editTenantGoods(this.form.id, vilnda).then(res => {
              if (res.code === 10000) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$emit('update:open', false)
                this.$emit('refresh')
              }
            })
          }
        } else {
          // 处理验证失败的情况
          const firstErrorField = Object.keys(errorFields)[0]
          let tabToSwitch = 'basic'

          // 根据错误字段确定要切换到哪个标签页
          if (['goods_name'].includes(firstErrorField)) {
            tabToSwitch = 'basic'
          } else if (['brand_name', 'unit_name', 'origin_name'].includes(firstErrorField)) {
            tabToSwitch = 'other'
          }

          // 切换到对应的标签页
          this.activeTab = tabToSwitch

          // 显示错误提示
          this.$message({
            message: '请检查表单填写是否正确',
            type: 'error'
          })
        }
        return false
      })
    }
  }
}
</script>

<style>
.upload-demo {
  display: inline-block;
  margin-bottom: 20px;
}

.el-upload-list--picture-card {
  width: 500px;
  display: flex !important;
  flex-wrap: wrap;
}

.el-tabs__content {
  padding: 20px 0;
}

/* 新增样式 */
.spec-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ebeef5;
}

.spec-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.empty-text {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

.box-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.sku-name {
  display: flex;
  align-items: center;
}

.new-sku {
  color: #E6A23C;
}

.spec-name-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.status-tag {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 5px;
  color: #fff;
}

.status-new {
  background-color: #E6A23C;
}

.status-exist {
  background-color: #67C23A;
}

.spec-tag {
  position: relative;
  padding-right: 20px;
  margin-bottom: 5px;
}

.status-dot {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.new-dot {
  background-color: #E6A23C;
}

.exist-dot {
  background-color: #67C23A;
}

.spec-tag-new {
  background-color: #fdf6ec;
  border-color: #f5dab1;
  color: #E6A23C;
}

.spec-tag-exist {
  background-color: #f0f9eb;
  border-color: #c2e7b0;
  color: #67C23A;
}

.el-tag {
  margin-bottom: 5px;
}

.sku-name-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-delete {
  background-color: #F56C6C;
}

/* 调整表格样式 */
.el-table {
  border-radius: 4px;
  overflow: hidden;
}

.el-table th {
  background-color: #F5F7FA !important;
  color: #606266;
  font-weight: 500;
  font-size: 13px;
}

.el-table td, .el-table th {
  padding: 8px 0;
}

.el-table--border td:first-child, 
.el-table--border th:first-child {
  border-left: none;
}

.el-table--border td:last-child, 
.el-table--border th:last-child {
  border-right: none;
}

.el-table__body tr:last-child td {
  border-bottom: none;
}

/* 输入框样式统一 */
.el-input-number.is-controls-right .el-input__inner {
  padding-left: 8px;
  padding-right: 35px;
  text-align: left;
}

.el-input-number {
  width: 100%;
}

/* 卡片样式优化 */
.box-card {
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.box-card .el-card__header {
  padding: 12px 15px;
  border-bottom: 1px solid #EBEEF5;
  background: #F5F7FA;
}

.box-card .el-card__body {
  padding: 15px;
}

/* 表格内容居中对齐 */
.el-table .cell {
  display: flex;
  align-items: center;
}

/* 价格和库存列的输入框样式 */
.el-table .el-input-number {
  width: 130px;
}

/* 规格名称列样式 */
.el-table .sku-name-wrapper {
  min-height: 32px;
  padding: 4px 0;
}
</style>
